<template>
    <div class="register">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>服务管理</el-breadcrumb-item>
            <el-breadcrumb-item>接待管理</el-breadcrumb-item>
            <el-breadcrumb-item>接待登记</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="top">
            <div class="phone">
                <p>咨询人电话</p>
                <div class="search">
                    <Search></Search>
                </div>
            </div>
            <div class="data-time">
                <p>接待时间</p>
                <div class="data">
                    <Data></Data>
                </div>
            </div>
            <div class="btn">
                <BtnSearch></BtnSearch>
                <Reset></Reset>
            </div>
        </div>
        <div class="table-box">
            <div class="increase">新增接待</div>
            <TableRegister></TableRegister>
            <Pages></Pages>
        </div>
    </div>
</template>

<script>
import Search from "../components/Search"
import Data from "../components/Data"
import BtnSearch from "../components/BtnSearch"
import Reset from "../components/Reset"
import TableRegister from '../components/TableRegister.vue'
import Pages from '../components/Pages'

export default {
    components: {
        Search,
        Data,
        BtnSearch,
        Reset,
        TableRegister,
        Pages
        
    }
}
</script>

<style lang="scss" scoped>
.register {
    width: 1120px;
    margin: 0 auto;
}
.top {
    display: flex;
    margin-top: 20px;
    height: 80px;
    line-height: 80px;
    background-color: #fff;
    padding: 0 20px;
    position: relative;
    .phone,.data-time {
        display: flex;
        .search {
            width: 200px;
        }
    }
    .el-input::v-deep .el-input__inner {
        height: 32px;
    }
    .data-time {
        margin-left: 50px;
        p {
            margin-right: 10px;
        }
    } 
    .btn {
        position: absolute;
        top: 0;
        right: 20px;
    }
}
.table-box {
    background-color: #fff;
    padding: 20px;
    margin-top: 20px;
    .increase {
        width: 88px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        color: #fff;
        background-color: #409EFF;
        border-radius: 5px;
    }
}
.el-pagination {
    margin-top: 20px;
    padding-left: 500px;
}
</style>